<template>
  
  <!-- 网格发展排名 -->
  <div class="rank-card">
    <div class="card-title">
      <img class="title-img" src="~@/assets/imgs/publicline/board/flag_wx.png" alt="">
      <span class="title">网格发展排名</span>
      <div class="right-block">
        <span class="rank-kpi" @click="showKpiList">
          {{ kpiName }}
          <van-icon name="exchange" style="vertical-align: middle;"/>
        </span>
      </div>
    </div>
    <div class="card-body">
      <div class="rank-list">
        <div class="rank-item rank-header">
          <span class="rank-no" @click="toggleRankType">
            <span class="rank-toggle">
              {{ rankType == 1 ? '市排名' : '省排名' }}
              <!-- <van-icon name="exchange" style="vertical-align: middle;"/> -->
            </span>
          </span>
          <span class="grid-name">网格名称</span>
          <span class="total">月累计发展</span>
        </div>
        <van-loading v-if="isLoadingRank" type="spinner" color="#1989fa" />
        <div v-else>
          <div class="empty-msg" v-if="rankList.length == 0">暂无排名数据！</div>
          <div class="rank-item" v-else v-for="(item,index) in rankList" :key="index">
            <span class="rank-no">{{ item.FZ_RANK }}</span>
            <span class="grid-name">{{ item.GRID_NAME }}</span>
            <span class="total">{{ item.TOTAL_VALUE }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="kpiListVisible" position="bottom" :style="{ height: '70%' }" >
      <van-picker
        title="排名指标列表"
        show-toolbar
        value-key="KPI_NAME"
        :columns="kpiList"
        :visible-item-count="10"
        @confirm="onKPIConfirm"
        @cancel="onKPICancel"
      />
    </van-popup>
  </div> 
</template>

<script>
import * as dayjs from "dayjs"
import { kpiRankSelect, kpiRankCity, kpiRankProvince } from '@/api/publicline/board.js'
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"

export default {
  props: {
    dayId: String
  },
  watch: {
    dayId: function() {
      this.getKpiRankList()
    }
  },
  data() {
    return {
      isLoadingRank: true,
      kpiListVisible: false,
      rankType: 1, // 1 市排名， 2 省排名
      rankUrl: null,
      kpiList: [],
      kpiCode: '',
      kpiName: '',
      rankList: [],

      loginId: '',
      realname: '',
    };
  },
  created() {
    const { username, realname } = Vue.ls.get(USER_INFO);
    this.loginId = username;
    this.realname = realname;
    this.getKpiRankSelect();
  },
  mounted() {
  },
  methods: {
    
    // 获取排名指标下拉框
    async getKpiRankSelect() {
      const res = await kpiRankSelect({})
      const { result, success } = res
      if (success) {
        this.kpiList = result
        this.rankKpiOptions = result.map( item => { 
          if ( item.KPI_NAME == '移网发展' ) {
            this.kpiCode = item.KPI_CODE || ''
            this.kpiName = item.KPI_NAME || ''
          }
        } )
        // this.kpiCode = this.kpiList[0].KPI_CODE || ''
        // this.kpiName = this.kpiList[0].KPI_NAME || ''
        this.getKpiRankList()
      }
    },
    // 获取排名列表
    async getKpiRankList() {
      if ( !this.kpiCode || !this.dayId ) return;
      this.isLoadingRank = true
      this.rankUrl = this.rankType == 1 ? kpiRankCity : kpiRankProvince
      const res = await this.rankUrl({ 
        gridId: this.$gridId, 
        dayId: dayjs(this.dayId).format('YYYYMMDD'), 
        kpiCode: this.kpiCode 
      })
      const { result, success } = res
      if (success) {
        this.rankList = result
        this.isLoadingRank = false
      }
    },
    showKpiList() {
      this.kpiListVisible = true;
    },
    toggleRankType() {
      return;
      if ( this.rankType == 1 ) {
        this.rankType = 2
      } else if ( this.rankType == 2 ) {
        this.rankType = 1
      }
      this.getKpiRankList()
    },
    onKPIConfirm(value) {
      this.kpiListVisible = false
      this.kpiCode = value.KPI_CODE
      this.kpiName = value.KPI_NAME
      this.getKpiRankList()
    },
    onKPICancel() {
      this.kpiListVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/less/rank-card.less";

</style>